<script setup>
import { ref } from "vue";
// 导⼊ todo 样式
import "./styles/index.css";

// 代办任务列表
const todoList = ref([
  { id: 321, name: "吃饭", finished: false },
  { id: 666, name: "睡觉", finished: true },
  { id: 195, name: "打⾖⾖", finished: false },
]);

// 任务名称
const title = ref("");

// 添加任务
const onAdd = () => {
  // 除去 title 的首尾空格
  const name = title.value.trim();
  // 非空校验
  if (!name) {
    alert("任务名称不能为空");
    return;
  }
  // 给 todoList 数组的末尾添加一个新对象
  todoList.value.push({
    name,
    id: Date.now(), // 时间戳
    finished: false,
  });
  // 清空输入框
  title.value = "";
};

const onDel = (i) => {
  if(confirm("确定要删除吗？")) {
    todoList.value.splice(i, 1);
  }
}

const onClear = () => {
  if(confirm("确定要删除吗？")) {
    todoList.value = []
  }
  
}
</script>

<template>
  <section clsss="todoapp">
    <header class="header">
      <h1>⽐特⼈记事本</h1>
      <input placeholder="请输⼊任务" class="new-todo" v-model="title" />
      <button class="add" @click="onAdd">添加任务</button>
    </header>
    <section class="main">
      <ul class="todo-list">
        <li class="todo" v-for="(item, index) in todoList" :key="item.id">
          <div class="view">
            <span class="index">{{ index + 1 }}</span>
            <label>{{ item.name }}</label>
            <button class="destroy" @click="onDel(index)"></button>
          </div>
        </li>
      </ul>
    </section>
    <footer class="footer">
      <span class="todo-count">合 计: <strong> {{ todoList.length }} </strong></span>
      <button class="clear-completed" @click="onClear">清空任务</button>
    </footer>
  </section>
</template>
